<template>
    <ul class="list">
        <li><i class="el-icon-house"></i><span>首页</span></li>
        <li><i class="el-icon-help"></i><span>分类</span></li>
        <li><i class="el-icon-shopping-cart-full"></i><span>购物车</span><span class="badge">4</span></li>
        <li><i class="el-icon-user"></i><span>我的</span></li>
    </ul>
</template>

<script>
export default {
    name: "name",
    data() {
        return {};
    },
    props: [],
    components: {},
    created() {},
    mounted() {},
    methods: {},
    computed: {},
    watch: {},
};
</script>

<style scoped lang="scss">
.list {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    li {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        i {
            font-size: 16px;
            margin-bottom: 2px;
        }
        span {
            font-size: 12px;
            color: #666;
        }
        .el-icon-shopping-cart-full,
        .el-icon-user {
            font-size: 18px;
        }
        .badge {
            position: absolute;
            top: -2px;
            left: 25px;
            background-color: red;
            color: #fff;
            font-size: 12px;
            border-radius: 100%;
            width: 14px;
            height: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>
